<template>
  <div class="addInfo-edit">
    <div class="add-tab">比赛管理</div>
    <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="large"
        label-width="100px"
    >
      <div class="list-item">
        <el-form-item
            label="比赛标题"
            prop="cName"
            maxleng="100"
            :rules="[
            { required: true, message: '请输入题目标题', trigger: 'blur' }
          ]"
        >
          <el-input
              v-model="form.cName"
              placeholder="请输入题目标题"
              clearable
              :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
          <el-form-item
              label="比赛时间"
              maxleng="100"
              prop="CompetitionTime"
              :rules="[
              { required: true, message: '请设置比赛时间', trigger: 'blur' }
            ]"
          >
            <el-date-picker
                v-model="form.CompetitionTime"
                type="datetimerange"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY/MM/DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item
              label="比赛说明"
              prop="desc"
              :rules="[
              { required: true, message: '请输入比赛说明', trigger: 'change' }
            ]"
          >
            <el-input
                v-model="form.desc"
                placeholder="请输入比赛说明"
                type="textarea"
                clearable
                :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <el-form-item
              label="题目编号"
              maxleng="100"
              prop="cidArray"
              :rules="[
              { required: true, message: '请输入题目编号', trigger: 'blur' }
            ]"
          >
            <el-select v-model="form.cidArray" multiple placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
      <el-form-item size="small">
        <el-button type="primary" plain size="large" @click="submitForm" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
        <el-button plain size="large" @click="refResFun">取消</el-button>
      </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>

import { ElMessage } from "element-plus";
import api from "../api/api.js";

const rules = {
  title: [
    {
      required: true,
      message: "请输入题目标题",
      trigger: "blur"
    }
  ],
  type: [
    {
      required: true,
      message: "题目数据不能为空",
      trigger: "change"
    }
  ]
};

export default {
  name: "AddCompetition",
  components: {

  },
  data() {
    return {
      rules,
      form: {
        cName: "",
        desc: "",
        CompetitionTime:[],
        values:[],
        labels:[],
        cidArray: [],
      },
      options: [],
      fullscreenLoading: false
    };
  },
  mounted() {
      api.GetProblemsList()
         .then((res) => {
           for (var i = 0; i < res.data.length; i++)
           {
              this.options.push({
                  value: res.data[i].pid,
                  label: res.data[i].pName
              });
           }
         })
  },
  methods: {
    CheckDescQuato() {
        this.form.cName = this.form.cName.replaceAll("'","''");
        this.form.desc = this.form.desc.replaceAll("'", "''");
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid)
        {
          ElMessage.error('提交失败');
          return;
        }
        ElMessage.success('提交新题');

        // 加载弹窗动画
        this.fullscreenLoading = true;
        // 进行分开
        console.log(this.form.cidArray);
        for (var i = 0; i < this.form.cidArray.length; i++)
        {
            this.form.values.push(this.form.cidArray[i]);
            for (var j = 0; j < this.options.length; j++)
            {
                if (this.options[j].value == this.form.cidArray[i])
                {
                    this.form.labels.push(this.options[j].label);
                }
            }
        }

        // 进行单引号处理
        this.CheckDescQuato();
        api.
          AddCompetition(this.form)
          .then((res) => {
              if (res && res.status == '200')
              {
                setTimeout(() => {
                  this.fullscreenLoading = false;
                }, 2000);
              }
          })

      });

    },
    refResFun() {
      this.$refs.form.resetFields();
    },

  }
}
</script>

<style lang="scss" scoped>

.addInfo-edit {
  padding: 30px;
  .add-tab {
    font-weight: bold;
    margin-bottom: 30px;
  }
  .list-item {
    position: relative;
    width: 1200px;
    margin-bottom: 30px;
    padding: 20px 70px 20px 0;
    border: 1px solid #eee;
    border-radius: 4px;
    .item-del {
      position: absolute;
      right: -50px;
      top: 0;
    }
  }

  .options-wrap {
    padding-left: 30px;
    .options-btn {
      margin-left: 20px;
    }
    .options-item {
      position: relative;
      margin-top: 15px;
      padding-top: 15px;
      padding-right: 15px;
      border: 1px solid #eee;
      border-radius: 4px;
    }
  }
  .last-options-wrap {
    margin-bottom: 16px;
    .options-item {
      margin-left: 16px;
    }
    .item-del{
      top: 18px;
    }
  }
}

</style>

33
